<template>
  <div>
    <el-dialog
      title="选择地区"
      :close-on-click-modal="false"
      @close="handleclose"
      v-model="isShow"
      width="30%"
    >
      <el-form label-width="120px">
        <el-form-item label="地区">
          <el-cascader
            :options="buildList"
            v-model="areaCode"
            :props="{
              checkStrictly: true,
              label: 'areaName',
              children: 'child',
              value: 'areaCode',
            }"
            clearable
            @change="handleChangeAreaCode"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isShow = false">取 消</el-button>
          <el-button type="primary" @click="handlesaveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script>
import { ref, reactive } from "vue";
import { dictionaries } from "../assets/js/dictionaries";
import api from "../api/api";
var projectId = Number(localStorage.getItem("projectId"));
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    const isShow = ref(context.attrs.isShow);
    const areaCode = ref("");
    const buildList = ref([]);
    const getAeaTreeList = () => {
      api
        .getListAPI("backup/area/areaTreeByProject?projectId=" + projectId, {})
        .then((res) => {
          if (res.data.code == 1) {
            buildList.value = res.data.data;
          }
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };
    getAeaTreeList();
    const handleclose = () => {
      isShow.value = false;
      context.emit("handleclose", isShow.value);
    };
    const handlesaveEdit = () => {
      context.emit("handlesaveEdit", areaCode.value);
    };
    const handleChangeAreaCode = (res) => {
      areaCode.value = res;
    };
    return {
      areaCode,
      isShow,
      buildList,
      handleclose,
      handlesaveEdit,
      handleChangeAreaCode,
    };
  },
};
</script>
  <style lang="less" scoped>
@import "../assets/css/common.css";
@import "../assets/css/device.less";
</style>
  